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jQuery Infinite Carousel Plugin 1.2 Released 

Posted on August 27, 2009 (Updated: December 30, 2011) (https://www.notonebit.com/blog/2009/08/27/jquery-infinite-carousel-plugin-1-2- 
released/) by admin (https://www.notonebit.com/blog/author/admin/) 

Update: The latest version of this plugin can be found here (http://www.notonebit.com/blog/catchmyfame-jquery- 
plugins/jquery-infinite-carousel-plugin/). 

Around the beginning of this month I released version 1.0.1 of the Infinite Carousel jQuery plugin. About a week later I 
received an email asking if I could add the ability for a visitor to jump to a specific image in the carousel. I'd seen this 
functionality in other carousels (none that run in infinite loops) where small images or some other user interface was 
displayed that allowed someone to pick an image and go directly to it. At first I thought sure, how hard could it be to enable 
this? If the current carousel could flow infinitely picture by picture, how difficult could it be to fast forward to a specific image 
in the sequence? Little did i realize what I was in for. 

Creating a user interface to allowjumping around the sequence of images was the easy part. Version 1.2 of the infinite 
Carousel creates thumbnail gallery with several options which allows you to click on a small box and jump to an image. The 
hard part turned out to be how to handle the actual jumping. I initially thought that I could fast forward the existing process, 
basically figuring out how far the carousel needed to be moved, and then just repeatedly moving one frame at a time. This 
didn't even come close to making it into the final code as the effect was not even close to passable. It even felt like cheating. 
So I went back to the drawing board and started from scratch. 

What I ended up with is a very fluid, very clean image carousel that allows you to jump to any image in the series, while 
maintaining all the functionality of the original Infinite Carousel. To make a long story, and many hours of coding short, the 
latest version of the Infinite Carousel manipulates the DOM based on how far away the desired image is. In a nutshell, list 
items and the images contained within (and optionally captions) are cloned, moved around, and deleted while the overall list 
is animated. Sounds easy. It's not. 

The final product is this: 


home 



While much of the original Infinite Carousel plugin (http://www.notonebit.com/blog/2009/06/04/jquery-infinite-carousel- 
plugin/) code was used in the latest version, the guts of moving images around was retooled. In addition, new options have 
been introduced to allow control over the thumbnails that can now be displayed below the carousel. 

I will keep version 1.0.1 of the infinite carousel available at its original location 

(http://www.notonebit.com/blog/2009/06/04/jquery-infinite-carousel-plugin/) in case anyone would like to continue to use it, 
while making version 1.2 available below. 

Update (8/31/2009): I just changed the license for this plugin to the share alike license 

(http://creativecommons.Org/licenses/by-sa/3.0/us/), updated the image paths, and fixed a problem with IE7 and errant 
commas. No other changes were made however the version number is now 1.2.2. 

Download 

Download jq uerv.infinitecarousel-1 2.zi p ( http://www.notonebit.com/blo g/iquerv/jq uerv.infinitecarousel-1 2.zi p). 

(version 1.2.2-8/31/2009) 

What's So Great About this Plugin? 

• Unlike most carousel plugins which stop when they get to the last image, 
this one allows the show to go on infinitely without any user intervention. 

If you have three images you want to display, after the third image has been 

displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as 
if the carousel is a true carousel and never ends. 

• Captions are optional. 

• Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence. 

• Thumbnails can be styled via CSS. 

• It's less than 14K (a minified/compressed version will be available shortly). 

• Reusable on multiple containers within the same page. 

• You can use CSS to add padding to the carousel area so that the previous and next images are hinted at (see demos 
below). 

How to Use 

First, all of the images that you want to display should be the same size and wrapped in a containing element (I recommend a 
div) which must have an ID. Note that by using CSS, you can style the container (carousel) div to have left and/or right 
padding so that you can display a small amount of the previous and/or next images. The carousel must be a list where each 
list item is the image and optionally a paragraph containing the caption. See this example. 


<div id="carouse] 

"> 








<ul> 

<li><img 

alt="" 

src="p1.jpg" 

width= 

'500" 

height= 

'213" 

/><p>This 

carousel has no padding applied 

<li><img 

alt="" 

src="p2.jpg" 

width= 

'500" 

height= 

’213" 

/><p>This 

is the caption for the second in 

<li><img 

alt="" 

src="p3.jpg" 

width= 

'500" 

height= 

’213" 

/></li> 


<li><img 

alt="" 

src="p4.jpg" 

width= 

’500" 

height= 

’213" 

/><p>It’s 

not easy being green.</p></li> 

<li><img 

alt="" 

src="p5.jpg" 

width= 

’500" 

height= 

’213" 

/></li> 


<li><img 

alt="" 

src="p6.jpg" 

width= 

’500" 

height= 

’213" 

/><p>You 

can easily mix images types. Gif, 

</ul> 

</div> 










All images *MUST* have the width and height declared otherwise the plugin won't work in Safari, Chrome, and any other 
webkit-based browsers. Also, all images should be the same size. If you want to have a caption with an image, it *MUST* 
exist in a paragraph after the image. 


To use the plugin you'll need to have a copy of jQuery (http://jquery.com/), or point to jquery on Google 
(http://ajax.googleapis.eom/ajax/libs/jquery/1.3.2/jquery.min.js), and the plugin. Place the files on your site and link to them: 








<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/I.3.2/jquery.min.j s"></5 
<script type="text/javascript" src="jquery.infinitecarousel.js"></script> 

<script type="text/javascript"> 

$(function(){ 

$('#carousel').infiniteCarousel(); 

}); 

</script> 

Finally, make sure that your CSS contains a rule for the width of the list within your container so that it's set to a minimum of 
the combined widths of all your images. For example. #carousel ul {width:3000px}. In version 1.2 of the Infinite Carousel this 
isn't necessary, however for anyone with JavaScript disabled, declaring the width in your style sheet can give them a simulated 
(albeit limited) carousel experience. At a minimum, the following CSS should be included in any page where the carousel 
exists (remember to change the width): 

#carousel ul { 

list-style: none; 
width:1600px; 
margin: 0; 
padding: 0; 
position:relative; 

} 

#carousel li { 

display:inline; 
float:left; 

} 

Be sure to check out the demos below. 

That's it! You can apply the infinite carousel to any number of elements on a page. 

Options 

The following options are configurable: 

• transitionSpeed - the time (in milliseconds) it will take to transition between two images (default 1500) 

• displayTime - the time (in milliseconds) to display each image (default: 6000) 

• textholderFleight - the height of the caption. This is a fraction of the height of the images, (default: .2) 

• displayProgressBar - Boolean. Whether or not to display the progress bar (default: 1) 

• displayThumbnails - Boolean. Whether or not to display the thumbnails for the carousel, (default: 1) 

• displayThumbnailNumbers - Boolean. Whether or not to automatically place numbers in the thumbnail boxes, (default: 

D 

• displayThumbnailBackground - Boolean. Whether or not to use the corresponding image as the background for a 
thumbnail box. (default: 1) 

• thumbnailWidth - the width of each thumbnail box. (default: '20px') 

• thumbnailPleight - the height of each thumbnail box. (default: '20pxj\ 

• thumbnailFontSize - the font size of the number within the thumbnail box. (default: .7em) 

Options are added when calling the script: 

$(’#carousel’).infiniteCarousel({ 
transitionSpeed : 2000, 
displayTime : 10000, 
textholderHeight : .25, 
displayProgressBar : 0 

}); 


Note that the CSS of the thumbnail div created by the plugin can be controlled by using a rule like #carousel + div {your CSS 
here}. The plus between the carousel id and the div specifically targets the thumbnail container. 






Enjoy! 


Demos 

• Example 1 (http://www.notonebit.com/blog/jquery/demo/10/) 

• Example 2 (http://www.notonebit.eom/blog/jquery/demo/10/index2.html) (uses padding to hint at the previous and 
next images and larger thumbnails with no background images. The thumbnail container is also centered with CSS) 

Note that the plugin uses several images which are kept in an images folder in the zip file (/js/infiniteCarousel/images/ by 
default). If you store the plugin in another folder on your server, update the path to these images. 

Graceful Degradation 

While almost everyone has JavaScript enabled in their browser you can use CSS to allow the plugin to degrade gracefully for 
those that don't. 

• Setting the width, height, and overlflow on the container creates a view port to give those w/o JavaScript an 
approximation of what they'd see with JavaScript. 

• Setting a width of 9999px (or some large number equal to or greater than the combined width of all images) on the 
container, combined with setting the list to display inline and float left allows the list to display horizontally (leaving the 
width out would make the list scroll vertically) 

• Setting a height on the container equal to the height of the images plus some extra allows the captions to display 
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